<template>
  <div>
    <div style="text-align: center">
      <span>horGrid</span>
      <div>
        vue + element-ui
      </div>
    </div>
    <div class="grid">
      <hor-grid :column="column" :data="data" :width="100"></hor-grid>
    </div>
  </div>
</template>
<script>
import horGrid from './components'
export default {
  components: {
    horGrid,
  },
  data () {
    return {
      data: [],
      column: [
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '性别',
          prop: 'sex'
        }
      ]
    }
  },
  created () {
    this.data = [{
      name: 'sam',
      sex: 'man'
    },{
      name: 'jeff',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    },{
      name: 'jeff',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    },{
      name: 'jeff',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    },{
      name: 'jeff',
      sex: 'man'
    },{
      name: 'sam',
      sex: 'man'
    }]
  }
}
</script>
<style scoped>
.grid{
  width: 500px;
  margin-left: calc(50% - 250px);
  background: gray;
  overflow: hidden;
  padding: 20px;
}
</style>
